<template>
  <div class="form-search-box">
    <div class="f-search" :class="open ? 'f-max-height' : 'f-min-height'">
      <div ref="isCollapse" class="form-is-collapse">
        <slot name="form"></slot>
      </div>
    </div>
    <div class="f-search-btn">
      <div>
        <slot name="btn"></slot>
      </div>
      <div class="f-icon-box" @click="searchIcon" v-if="isOpen">
        <el-icon class="search-icon" :class="open ? 'search-icon-rotate' : ''"
          ><DArrowRight
        /></el-icon>
      </div>
    </div>
    <div class="f-add-btn">
      <slot name="addbtn"></slot>
    </div>
  </div>
</template>

<script setup>
const open = ref(false);
const isOpen = ref(false);
const isCollapse = ref(null);
const searchIcon = () => {
  open.value = !open.value;
};
onMounted(() => {
  getHeight();
  window.addEventListener("resize", () => {
    getHeight();
  });
});
const getHeight = () => {
  try {
    let clientHeight = isCollapse.value.clientHeight;
    if (clientHeight > 50) {
      isOpen.value = true;
    } else {
      isOpen.value = false;
    }
  } catch (error) {}
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    getHeight();
  });
});
</script>

<style lang="scss" scoped>
.form-search-box {
  padding: 20px;
  padding-bottom: 0;
  display: flex;
  .f-search {
    width: 0;
    flex: 1;
    overflow: hidden;
    transition: max-height 0.3s;
    will-change: max-height;
  }
  .f-min-height {
    // height: 45px;
    max-height: 50px;
  }
  // .f-max-height {
  //   max-height: 200px;
  // }
  .f-search-btn {
    user-select: none;
    display: flex;
    margin-left: 20px;
    .f-icon-box {
      margin-left: 10px;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .search-icon {
      transition: 0.3s;
      transform: rotate(90deg);
      cursor: pointer;
    }
    .search-icon-rotate {
      transform: rotate(-90deg);
    }
  }
  .f-add-btn {
    display: none;
    padding-left: 10px;
    padding-bottom: 10px;
  }
}
</style>
